<template>
  <!-- 查询条件 -->
  <el-form :inline="true" :model="page" class="demo-form-inline">
    <el-form-item label="登录人">
      <el-input v-model="page.UserName" placeholder="请输入登录人" clearable />
    </el-form-item>
    <el-form-item label="审批状态">
      <el-select v-model="page.ApprovalState" placeholder="请选择审批状态" clearable>
        <el-option label="已审批" :value="true" />
        <el-option label="待审批" :value="false" />
      </el-select>
    </el-form-item>
    <el-form-item label="请假时间">
      <el-date-picker v-model="page.LeaveStartTime" type="date" placeholder="请选择开始时间" clearable />—— <el-date-picker
        v-model="page.LeaveEndTime" type="date" placeholder="请选择结束时间" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getData()">查询</el-button>
    </el-form-item>
  </el-form>

  <el-button plain @click="dialogTableVisible = true">添加</el-button>
  <!-- 表格 -->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="" type="index" label="序号" width="50" />
    <el-table-column prop="userName" label="姓名" width="120" />
    <el-table-column prop="deionName" label="部门" width="120" />

    <el-table-column prop="leaveType" label="请假类型" width="120">
      <template #default="scope">
        <el-inp v-if="scope.row.leaveType == 1">事假</el-inp>
        <el-inp v-if="scope.row.leaveType == 2">病假</el-inp>
        <el-inp v-if="scope.row.leaveType == 3">婚假</el-inp>
        <el-inp v-if="scope.row.leaveType == 4">产假</el-inp>
      </template>
    </el-table-column>

    <el-table-column prop="leaveStartTime" label="请假时间" width="150">
      <template #default="scope">
        {{ moment(scope.row.leaveStartTime).format("YYYY-MM-DD") }}
        至
        {{ moment(scope.row.leaveEndTime).format("YYYY-MM-DD") }}
      </template>
    </el-table-column>

    <el-table-column prop="leaveZong" label="总工时" width="120" />

    <el-table-column prop="baoDaoTime" label="报道时间" width="120">
      <template #default="scope">
        {{ moment(scope.row.baoDaoTime).format("YYYY-MM-DD") }}
      </template>
    </el-table-column>

    <el-table-column prop="leaveReason" label="请假事由" width="120" />
    <el-table-column prop="buFuName" label="部门领导" width="120" />

    <el-table-column prop="approvalState" label="审批状态" width="120">
      <template #default="scope">
        <el-inp v-if="scope.row.approvalState == false">待审批</el-inp>
        <el-inp v-if="scope.row.approvalState == true">已审批</el-inp>
      </template>
    </el-table-column>

    <el-table-column prop="crearTime" label="创建时间" width="120">
      <template #default="scope">
        {{ moment(scope.row.crearTime).format("YYYY-MM-DD") }}
      </template>
    </el-table-column>

    <el-table-column fixed="right" label="操作列" min-width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" v-show="scope.row.approvalState != true"
          @click="open(scope.row.id)">删除</el-button>
        <el-button link type="primary" size="small" v-show="scope.row.approvalState != true"
          @click="Edit(scope.row)">修改</el-button>
        <el-button link type="primary" size="small" v-show="scope.row.approvalState == false"
          @click="statu(scope.row)">审批</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <table>
    <tbody>
      <tr>
        <td>
          <el-pagination v-model:current-page="tato.Index" v-model:page-size="tato.Size" :page-sizes="[15, 20, 30, 40]"
            :background="true" layout="slot, sizes" :total="tato.totalCount" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
            共{{ tato.totalCount }}条 {{ tato.Index }}/{{ tato.totalPage }}页
          </el-pagination>
        </td>
        <td>
          <el-pagination v-model:current-page="tato.Index" v-model:page-size="tato.Size" :page-sizes="[15, 20, 30, 40]"
            :background="true" layout="slot, prev, pager, next" :total="tato.totalCount" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
            <el-button @click="handleCurrentChange(1)" :disabled="tato.Index == 1">首页</el-button>
          </el-pagination>
        </td>
        <td>
          <el-pagination v-model:current-page="tato.Index" v-model:page-size="tato.Size" :page-sizes="[15, 20, 30, 40]"
            :background="true" layout="slot, jumper" :total="tato.totalCount" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
            <el-button @click="handleCurrentChange(tato.totalPage)"
              :disabled="tato.Index == tato.totalPage">尾页</el-button>
          </el-pagination>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- 添加 -->
  <el-dialog v-model="dialogTableVisible" title="添加" width="800">
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
      <el-form-item label="姓名" prop="userName">
        <el-input v-model="ruleForm.userName" />
      </el-form-item>
      <el-form-item label="部门" prop="deionId">
        <el-select v-model="ruleForm.deionId">
          <el-option v-for="a in getDeionName" :label="a.deionName" :value="a.deionId" />
          <!-- <el-option label="人力资源部" :value="2" />
          <el-option label="财务部" :value="3" />
          <el-option label="销售部" :value="4" /> -->
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="部门" prop="deionId">
        <el-select v-model="ruleForm.deionId">
          <el-option label="IT信息部" :value="1" />
          <el-option label="人力资源部" :value="2" />
          <el-option label="财务部" :value="3" />
          <el-option label="销售部" :value="4" />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="部门" prop="deionId">
        <el-input v-model="ruleForm.deionId" />
      </el-form-item> -->
      <el-form-item label="请假类型" prop="leaveType">
        <el-radio-group v-model="ruleForm.leaveType" :max="1">
          <el-radio v-for="city in cities" :key="city" :label="city" :value="city"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="请假时间">
        <!-- 开始时间 -->
        <el-col :span="10">
          <el-date-picker v-model="ruleForm.leaveStartTime" type="date" placeholder="请选择开始时间" style="width: 100%" />
          <el-time-picker v-model="ruleForm.leaveStartTime" style="width: 100%" />
        </el-col>
        <el-col class="text-center" :span="2">
          <span class="text-gray-500">——</span>
        </el-col>
        <!-- 结束时间 -->
        <el-col :span="10">
          <el-date-picker v-model="ruleForm.leaveEndTime" type="date" placeholder="请选择结束时间" style="width: 100%" />
          <el-time-picker v-model="ruleForm.leaveEndTime" style="width: 100%" />
        </el-col>
      </el-form-item>
      <!-- 报道时间 -->
      <el-col :span="10">
        <el-date-picker v-model="ruleForm.baoDaoTime" type="date" placeholder="请选择报道时间" style="width: 100%" />
        <el-time-picker v-model="ruleForm.baoDaoTime" style="width: 100%" />
      </el-col>
      <el-form-item label="共计时长">
        <el-input v-model="ruleForm.leaveZong" disabled></el-input>
      </el-form-item>


      <el-form-item label="请假事由" prop="leaveReason">
        <el-input v-model="ruleForm.leaveReason" />
      </el-form-item>
      <el-form-item label="部门领导" prop="buFuName">
        <el-input v-model="ruleForm.buFuName" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          添加
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!-- 修改 -->
  <el-dialog v-model="dialogTableVisible1" title="修改" width="800">
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
      <el-form-item label="姓名" prop="userName">
        <el-input v-model="ruleForm.userName" />
      </el-form-item>

      <el-form-item label="部门" prop="deionId">a
        <el-select v-model="ruleForm.deionId">
          <el-option v-for="a in getDeionName" :label="a.deionName" :value="a.deionId" />
          <!-- <el-option label="人力资源部" :value="2" />
          <el-option label="财务部" :value="3" />
          <el-option label="销售部" :value="4" /> -->
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="部门" prop="deionId">
        <el-input v-model="ruleForm.deionId" />
      </el-form-item> -->
      <el-form-item label="请假类型" prop="leaveType">
        <el-radio-group v-model="ruleForm.leaveType" :max="1">
          <el-radio v-for="city in cities" :key="city" :label="city" :value="city"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="请假时间">
        <!-- 开始时间 -->
        <el-col :span="10">
          <el-date-picker v-model="ruleForm.leaveStartTime" type="date" placeholder="请选择开始时间" style="width: 100%" />
          <el-time-picker v-model="ruleForm.leaveStartTime" style="width: 100%" />
        </el-col>
        <el-col class="text-center" :span="2">
          <span class="text-gray-500">——</span>
        </el-col>
        <!-- 结束时间 -->
        <el-col :span="10">
          <el-date-picker v-model="ruleForm.leaveEndTime" type="date" placeholder="请选择结束时间" style="width: 100%" />
          <el-time-picker v-model="ruleForm.leaveEndTime" style="width: 100%" />
        </el-col>
      </el-form-item>
      <!-- 报道时间 -->
      <el-col :span="10">
        <el-date-picker v-model="ruleForm.baoDaoTime" type="date" placeholder="请选择报道时间" style="width: 100%" />
        <el-time-picker v-model="ruleForm.baoDaoTime" style="width: 100%" />
      </el-col>
      <el-form-item label="共计时长">
        <el-input v-model="ruleForm.leaveZong" disabled></el-input>
      </el-form-item>


      <el-form-item label="请假事由" prop="leaveReason">
        <el-input v-model="ruleForm.leaveReason" />
      </el-form-item>
      <el-form-item label="部门领导" prop="buFuName">
        <el-input v-model="ruleForm.buFuName" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm1()">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!-- 审批 -->
  <el-dialog v-model="dialogTableVisible2" title="审批" width="800">
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
      <el-form-item label="姓名" prop="userName">
        <el-input v-model="ruleForm.userName" disabled />
      </el-form-item>

      <el-form-item label="部门" prop="deionId">
        <el-select v-model="ruleForm.deionId">
          <el-option v-for="a in getDeionName" :label="a.deionName" :value="a.deionId" disabled />
        </el-select>
      </el-form-item>

      <el-form-item label="请假类型" prop="leaveType">
        <el-radio-group v-model="ruleForm.leaveType" :max="1" disabled>
          <el-radio v-for="city in cities" :key="city" :label="city" :value="city">{{ city }}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="请假时间">
        <!-- 开始时间 -->
        <el-col :span="10">
          <el-date-picker v-model="ruleForm.leaveStartTime" type="date" placeholder="请选择开始时间" style="width: 100%" />
          <el-time-picker v-model="ruleForm.leaveStartTime" style="width: 100%" />
        </el-col>
        <el-col class="text-center" :span="2">
          <span class="text-gray-500">——</span>
        </el-col>
        <!-- 结束时间 -->
        <el-col :span="10">
          <el-date-picker v-model="ruleForm.leaveEndTime" type="date" placeholder="请选择结束时间" style="width: 100%" />
          <el-time-picker v-model="ruleForm.leaveEndTime" style="width: 100%" />
        </el-col>
      </el-form-item>
      <!-- 报道时间 -->
      <el-col :span="10">
        <el-date-picker v-model="ruleForm.baoDaoTime" type="date" placeholder="请选择报道时间" style="width: 100%" />
        <el-time-picker v-model="ruleForm.baoDaoTime" style="width: 100%" />
      </el-col>
      <el-form-item label="共计时长">
        <el-input v-model="ruleForm.leaveZong" disabled></el-input>
      </el-form-item>


      <el-form-item label="请假事由" prop="leaveReason">
        <el-input v-model="ruleForm.leaveReason" disabled />
      </el-form-item>
      <el-form-item label="部门领导" prop="buFuName">
        <el-input v-model="ruleForm.buFuName" disabled />
      </el-form-item>

      <el-form-item label="审核" prop="approcalYuan">
        <el-radio-group v-model="ruleForm.approvalState">
          <el-radio :value="true">通过</el-radio>
          <el-radio :value="false">拒绝</el-radio>
          <el-input v-model="ruleForm.approcalYuan" v-show="ruleForm.approvalState == false"
            placeholder="原因"></el-input>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm2()">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import axios from 'axios';
import moment from 'moment';
import { onMounted, ref, watch } from 'vue';
import https from '../../http/AxiosHelper';
onMounted(() => {
  getData();
  getDeion();
})

const page = reactive({
 
  LeaveStartTime: "",
  LeaveEndTime: '',
  ApprovalState: '',
  UserName: '',
  
  CurrentUser: ''

})
const tato=reactive({
   Index: 1,
  Size: 15,
  totalCount: 0,
  totalPage: 0,
})

const tableData = ref([])
const getData = () => {
  https.get("api/Leave/GetLeave", { params: { Index: tato.Index,
     Size: tato.Size,
      LeaveStartTime: page.LeaveStartTime,
       LeaveEndTime: page.LeaveEndTime,
        ApprovalState: page.ApprovalState,
        UserName:page.UserName,
        CurrentUser:localStorage.getItem("userName")
       } }).then(res => {
    tableData.value = res.data.data
    tato.totalCount = res.data.totalCount
    tato.totalPage = res.data.totalPage
  })
}
watch(tato,()=>{
  getData();
})
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
//弹框
const dialogTableVisible = ref(false)
const dialogTableVisible1 = ref(false)
const dialogTableVisible2 = ref(false)
//部门下拉框
const getDeionName: any = ref({
  "deionId": '',
  "deionName": "",
});
const getDeion = () => {
  https.get("api/Deion/GetDeion").then(res => {
    getDeionName.value = res.data.data
  })
}
// 添加
import { reactive } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const ruleForm :any= reactive({
  "userId":localStorage.getItem("userId"),
  "userName": localStorage.getItem('userName'),
  "deionId": Number(localStorage.getItem('deionId')),
  "leaveType": '',
  "leaveStartTime": "",
  "leaveEndTime": "",
  "baoDaoTime": "",
  "leaveReason": "",
  "buFuName": "",
  "leaveZong": '',
  "approcalYuan": "",
  'approvalState': ''
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules>({
  userName: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ],
  leaveReason: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  buFuName: [
    {
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      https.post("api/Leave/AddLeave", ruleForm).then(res => {
        if (res.data.code == 200) {
          ElMessage.success(res.data.msg);
          dialogTableVisible.value = false;
          getData();
        }
        else {
          ElMessage.error(res.data.msg);
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
//时间计算
watch(
  () => [ruleForm.leaveStartTime, ruleForm.leaveEndTime],
  ([start, end]) => {
    if (start && end) {
      const s = new Date(start)
      const e = new Date(end)
      const diff = Math.floor((e.getTime() - s.getTime()) / (1000 * 60 * 60 * 24))
      ruleForm.leaveZong = diff > 0 ? diff * 8 : 0
    }
    else {
      ruleForm.leaveZong = 0;
    }
  }
)
// const zong = () => {
//   if (ruleForm.leaveStartTime && ruleForm.leaveEndTime) {
//     const start: any = new Date(ruleForm.leaveStartTime);
//     const end: any = new Date(ruleForm.leaveEndTime);
//     const diffInDays = end - start;
//     const totalDays = Math.floor(diffInDays / (1000 * 60 * 60 * 24));
//     const remainingDays = diffInDays & (1000 * 60 * 60 * 24);
//     const totalHours = Math.floor(remainingDays / (1000 * 60 * 60));
//     return `${totalDays}天 `
//   }
//   return 0;
// }


//请假类型
const cities = ['事假', '病假', '婚假', '产假']
//删除
import { ElMessageBox } from 'element-plus'
import { ta } from 'element-plus/es/locales.mjs';
import http from '@/http/AxiosHelper';
const open = (id: any) => {
  ElMessageBox.confirm(
    '确定要删除吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      https.get("api/Leave/DelLeave",{params: { id: id }}).then(res => {
        if (res.data.code == 200) {
          ElMessage.success(res.data.msg);
          getData();
        }
        else {
          ElMessage.error(res.data.msg);
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除被取消',
      })
    })
}
//部门反填下拉框
const workName = () => {
  var deionId = localStorage.getItem('deionId');
  if (deionId == <any>1) {
    getDeionName.deionName = "IT信息部"
  }
  if (deionId == <any>2) {
    getDeionName.deionName = "人力资源部"
  }
  if (deionId == <any>3) {
    getDeionName.deionName = "财务部"
  }
  if (deionId == <any>4) {
    getDeionName.deionName = "销售部"
  }
}

// 修改  api/Leave/UpdateLeave
const Edit = (row: any) => {
  dialogTableVisible1.value = true;
  Object.assign(ruleForm, row)
  console.log(ruleForm);
}
const submitForm1 = () => {
  https.post("api/Leave/UpdateLeave", ruleForm).then(res => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg)
      dialogTableVisible1.value = false
      getData();
    }
    else {
      ElMessage.error(res.data.msg)
    }
  })
}
//审批
const statu = (row: any) => {
  dialogTableVisible2.value = true
  Object.assign(ruleForm, row)
}
const submitForm2 = () => {
  https.post("api/Leave/UpdateStatu", ruleForm).then(res => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
      dialogTableVisible2.value = false;
      getData();
    }
    else {
      ElMessage.error(res.data.msg);
    }
  })
}



</script>




<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
